<template>
    <div v-loading="loading">
        <div class="box" v-if="visible">
            <div class="box_div" @click.stop="">
                <i class="el-icon-close" @click="visible = false"></i>
                <h4> {{ type == 'create' ? '添加文章' : '修改文章' }} </h4>
                <el-form :model="form" ref="form" style="width: 100%;">
                    <el-form-item label="标题" v-if="type == 'create'  || form.title">
                        <el-input placeholder="请输入用户名" style="width: 300px;" v-model="form.title"></el-input>
                    </el-form-item>
                    <el-form-item label="内容" v-if="type == 'create' || form.content">
                        <VueEditor v-model="form.content" style="margin-left: 40px;height: 620px;overflow: auto;">
                        </VueEditor>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" style="width: 470px;margin: 30px auto;margin-left: 26%;"
                            @click="submit" :loading="submitComplete">提交</el-button>
                    </el-form-item>
                </el-form>
            </div>   
        </div>

        <el-card body-style="padding:10px" class="box-card">
            <el-input clearable placeholder="请输入关键词" size="small" style="width: 200px;" v-model="query.keyword"></el-input>
            <el-button @click="page=1;init()" size="small" style="margin-left: 30px;" type="primary">搜索</el-button>
            <el-button @click="toForm()" size="small" type="success" v-permission="['ADMIN', 'ARTICLE_ADD']">添加</el-button>
            <el-button @click="page=1;init()" icon="el-icon-refresh-right" size="small" type="primary">刷新</el-button>
        </el-card>
        
        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-table :data="data" max-height="550px" size="small" style="width: 100%">
                <el-table-column label="ID" prop="id"></el-table-column>
                <el-table-column label="标题" prop="title"></el-table-column>
                <el-table-column label="观看数" prop="viewed">
                    <!-- <template slot-scope="scope">
                        <UserInfo :user_id="scope.row.author_id" v-if="scope.row.author_id"></UserInfo>
                    </template> -->
                </el-table-column>


                <el-table-column label="添加时间" sortable  prop="created_at"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="toForm(scope.row)" size="mini" type="primary"
                           style="padding: 10px"  v-permission="['ADMIN', 'ARTICLE_UPDATE']">修改</el-button>
                        <el-popconfirm @confirm="del(scope.row.id)" title="这是一段内容确定删除吗？">
                            <el-button size="mini" slot="reference" type="danger"
                                style="padding: 10px"  v-permission="['ADMIN', 'ARTICLE_DELETE']">删除</el-button>
                        </el-popconfirm>
                        <el-button size="mini" slot="reference" type="success" style="padding: 10px"
                            @click="toDetails(scope.row.id)"  v-permission="['ADMIN', 'ARTICLE_DETAILS']">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-pagination :current-page="page" :total="total" @current-change="pageChange" @size-change="sizeChange"
                layout="total, prev, pager, next, sizes" style="margin-top: 8px;" />
        </el-card>
    </div>
</template>

<script>
import initData from '@/mixins/index'
import VueEditor from '@/components/Editor/index'
import medium from '@/components/medium/index'
export default {
    name:"article-list",
    mixins: [initData],
    components: {
        medium,
        VueEditor
    },
    data() {
        return {
            submitComplete:false,
            query: {
                keyword: ""
            },
            form: {
                title: "",
                content: ""
            },
            visible: false,
            type: 'create',


        }
    },
    mounted() {
        this.beforeInit()
    },
    methods: {
        beforeInit() {
            this.url = '/article/index'
            this.init() //重新请求数据
        },

        toArray(str) {
            const arr = []
            arr.push(str)
            return arr
        },
        del(id) {
            this.$request.del('/article/delete/' + id).then((res) => {
                this.$message.success('删除成功')
                this.init()
            })
        },

        toDetails(id) {
            this.$router.push({ path: "article-details?id=" + id });
        },

        getSystemNoticeDetails(id) {
            let that = this
            this.$request.get('/system/notification/get/' + id).then((res) => {
                that.form = res
                console.log("getSystemNoticeDetails", res)
            })
        },

        toForm(form = null) {
            this.visible = true //打开弹出框
            if (form != null) {
                this.type = 'update'
                this.form= form
            } else {
                this.type = 'create'
                this.worksId = ''
                this.form = {
                    title: "",
                    content: ""
                }
            }
        },

        closeBox() {
            this.visible = false
            this.form = {
                title: "",
                content: ""
            }
        },

        //提交
        submit() {
            if(this.submitComplete) return
            this.submitComplete = true
            if (!(this.form.title && this.form.content)) {
                this.$message({
                    message: '请将信息填写完整！',
                    type: 'warning'
                });
                this.submitComplete = false
                return
            }


            if (this.type == 'create') {
                this.$request.post('/article/create', this.form).then((res) => {
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    });
                    this.submitComplete = false
                    this.closeBox()
                    this.init()
                }).catch((error)=>{
                this.submitComplete = false
                });
            } else {
                this.$request.put('/article/update/' + this.form.id, this.form).then((res) => {
                    console.log(res)
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    this.submitComplete = false
                    this.closeBox()
                    this.init()
                }).catch((error)=>{
                this.submitComplete = false
                });
            }
        },
    },
}
</script>

<style lang="scss" scoped>
.box {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba($color: #000000, $alpha: 0.5);
    z-index: 2;

    .box_div {
        width: 1000px;
        height: 900px;
        background-color: white;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        position: absolute;
        padding: 20px;
    }

    .el-icon-close {
        position: absolute;
        top: 30px;
        right: 30px;
    }

    .el-icon-close:hover {
        color: rgb(0, 134, 243);
        cursor: pointer;
    }
}
</style>